<template>
    <div class="leftTop_warp">
        <div class="leftTop_warp_header">
            <el-button v-for="item in btnlist"
                :type="activeRow && activeRow.datakey === item.datakey ? 'isactiveBtn' : ''" :key="item.datakey"
                size="small" @click="btnClick(item)">{{ item.label }}</el-button>
        </div>

        <div class="leftTop_warp_comend">
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.type == 'bar'" />
            <Todolist :listdata="listdata" v-else-if="activeRow && activeRow.type == 'list'" />
            <!--  -->
            <bar :chartData="chartData" v-else-if="chartData && activeRow && activeRow.value === '水文站'" />
            <bar :chartData="chartData" v-else-if="chartData && activeRow && activeRow.value === '雨量站'" />
            <bar :chartData="chartData" v-else-if="chartData && activeRow && activeRow.value === '水位站'" />
            <bar :chartData="chartData" v-else-if="chartData && activeRow && activeRow.value === '工情站'" />
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { btn2, cityls, sxtdata, wrjdata, levells, shuiwenlist, yulianglist, gqlist } from '../data/dataconfig'
import { baroption, pieoption } from "../data/echarts"
import bar from "../../../components/echarts/bar.vue";
import Todolist from './tdlist.vue'
const btnlist = ref(btn2)
const activeRow = ref(null)
const chartData = ref(null)
const listdata = ref(sxtdata)
const btnClick = (row) => {
    activeRow.value = row
    if (row.value === '摄像头') {
        listdata.value = sxtdata
    } else if (row.value === '无人机') {
        listdata.value = wrjdata
    } else if (row.value === '水质站') {
        listdata.value = wrjdata
        let newbar = JSON.parse(JSON.stringify(baroption))
        newbar.xAxis.data = levells
        newbar.series[0].data = [11, 10, 12, 14, 12, 18, 11, 10]
        chartData.value = newbar
    } else if (row.value === '水文站') {
        let newbar = JSON.parse(JSON.stringify(pieoption))
        let lendarr = []
        let allvalue = null
        shuiwenlist.forEach((item) => {
            lendarr.push(item.name)
            allvalue += item.value
        })
        newbar.title.subtext = '水文站'
        newbar.title.text = 80
        newbar.legend.data = lendarr
        newbar.series[0].data = shuiwenlist
        newbar.series[1].data[0].value = allvalue
        chartData.value = newbar
    } else if (row.value === '雨量站') {
        let newbar = JSON.parse(JSON.stringify(pieoption))
        let lendarr = []
        let allvalue = null
        yulianglist.forEach((item) => {
            lendarr.push(item.name)
            allvalue += item.value
        })
        newbar.title.subtext = '雨量站'
        newbar.title.text = 80
        newbar.legend.data = lendarr
        newbar.series[0].data = yulianglist
        newbar.series[1].data[0].value = allvalue
        chartData.value = newbar
    } else if (row.value === '水位站') {
        let newbar = JSON.parse(JSON.stringify(pieoption))
        let lendarr = []
        let allvalue = null
        shuiwenlist.forEach((item) => {
            lendarr.push(item.name)
            allvalue += item.value
        })
        newbar.title.subtext = '水位站'
        newbar.title.text = 80
        newbar.legend.data = lendarr
        newbar.series[0].data = shuiwenlist
        newbar.series[1].data[0].value = allvalue
        chartData.value = newbar
    } else if (row.value === '工情站') {
        let newbar = JSON.parse(JSON.stringify(pieoption))
        let lendarr = []
        let allvalue = null
        gqlist.forEach((item) => {
            lendarr.push(item.name)
            allvalue += item.value
        })
        newbar.title.subtext = '工情站'
        newbar.title.text = 80
        newbar.legend.data = lendarr
        newbar.series[0].data = gqlist
        newbar.series[1].data[0].value = allvalue
        chartData.value = newbar
    }

}

const getpieserveis = (trafficWay) => {

    var data = [];
    var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
    for (var i = 0; i < trafficWay.length; i++) {
        data.push({
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 3,
                    shadowBlur: 10,
                    borderColor: color[i],
                    shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        });
    }
    var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [55, 54],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            return params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                        } else {
                            return '';
                        }
                    },
                },
                labelLine: {
                    length: 10,
                    length2: 30,
                    show: true,
                    color: '#00ffff'
                }
            }
        },
        data: data
    }];

    return seriesOption
}
const creatOption = () => {
    // 
    // newbar.xAxis.data = cityls
    // newbar.series[0].data = [11,10,12,14,12,18,11,10]
    // chartData.value =newbar 
}
onMounted(() => {
    nextTick(() => {
        console.log(btnlist.value[0])
        btnClick(btnlist.value[0])
    })
})
</script>

<style lang="less" scoped>
.leftTop_warp {
    height: 100%;
    width: 100%;
}

.leftTop_warp_header {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .el-button+.el-button {
        margin-left: 0;

    }

    .el-button {
        margin-right: 0.3rem;
        min-width: 2.8rem;
        background: rgba(0, 0, 0, 0);
        border: 0px;
        color: #fff;
        background-image: url(../../../assets/image/home/menu.png);
        background-size: cover;
        font-size: 0.8rem;
    }

    .el-button--isactiveBtn {
        background-image: url(../../../assets/image/home/menu-active.png);
        background-size: cover;
    }
}

.leftTop_warp_comend {
    height: calc(100% - 5.1rem);
}
</style>